<template>
	<div :class="['roadLicenseBox', 'settleInfoBox', {'mt40': !isShow}]">
		<div class="settleContItem">
			<p class="title" v-show="isShow">道路运输许可证信息</p>
			<Form ref="settleForm" :model="settleForm" :rules="roadLincenseValidate" :label-width="220" label-position="left">
                <FormItem label="道路运输经营许可证号" prop="licenseNo" class="InputMarginR">
                    <Input v-model.trim="settleForm.licenseNo" size="large" :maxlength="12" placeholder="输入道路运输经营许可证上的号码"></Input>
                </FormItem>
                <FormItem label="道路运输经营许可证发证日期" prop="licensePublish">
                    <DatePicker :value="settleForm.licensePublish" :editable="false" @on-change="getLicensePublic" :clearable="false" format="yyyy-MM-dd" type="date" placeholder="选择日期"></DatePicker>
                </FormItem>
                <FormItem label="道路运输经营许可证开始日期" prop="licenseBegin" class="InputMarginR">
                    <DatePicker :value="settleForm.licenseBegin" :editable="false" :clearable="false" @on-change="getLicenseBegin" format="yyyy-MM-dd" type="date" placeholder="选择日期"></DatePicker>
                </FormItem>
                <FormItem label="道路运输经营许可证结束日期" prop="licenseEnd">
                   <DatePicker :value="settleForm.licenseEnd" :editable="false" :clearable="false" @on-change="getLicenseEnd" format="yyyy-MM-dd" type="date" placeholder="选择日期"></DatePicker>
                </FormItem>
                <FormItem label="所属道路运输管辖区域" prop="provinceCode" class="desctrictInput">
                    <Select v-model.trim="settleForm.provinceCode" placeholder="请选择省份" clearable class="selectInput" @on-change="provinceCodeChange">
				        <Option v-for="item in provinceJson" :value="item.c" :key="item.c">{{ item.n }}</Option>
				    </Select>
                </FormItem>
                <FormItem prop="cityCode" class="cityInput" style="margin-left: 2px">
                	<Select v-model.trim="settleForm.cityCode" placeholder="请选择城市" clearable @on-change="cityCodeChange">
				        <Option v-for="item in getCity" :value="item.c" :key="item.c">{{ item.n }}</Option>
				    </Select>
                </FormItem>
                <FormItem prop="countyCode" class="cityInput" style="margin-left: 2px;">
                	<Select v-model.trim="settleForm.countyCode" placeholder="请选择区域" clearable>
				        <Option v-for="item in getCounty" :value="item.c" :key="item.c">{{ item.n }}</Option>
				    </Select>
                </FormItem>
                <FormItem label="道路运输经营许可证照片" prop="roadPhoto" class="imgBoxForm">
                	<Input v-model.trim="settleForm.roadPhoto" class="InputNone"></Input>
                    <upload-img @getPhoto="getRoadPhoto" :imgList="imgList" ref="imgUpload"></upload-img>
                    <zoomImg style="width: 120px; height: 80px; display: inline-block" :width="70" :ml="-35" :source="1" :imgWidth="'120px'" :imgId="'static/images/settle/roadTransport.png'" :title="'道路运输经营许可证照片'"></zoomImg>
                    <!-- <img src="static/images/settle/roadTransport.png"> -->
                </FormItem>
                <FormItem label="选择经营范围" prop="licenseScope" class="lincenseScopeBox">
			       	<bussinessScope ref="bussinessScope" :settleForm="settleForm"></bussinessScope>
                </FormItem>
            </Form>
		</div>
	</div>
</template>
<script type="text/javascript">
import { provinceJson, cityJson, countyJson } from "commons/json/city";
import { businessTypeJson } from "commons/json/businessType";
import bussinessScope from "./bussinessScope";
import UploadImg from "components/commons/UploadImg";
import zoomImg from "./zoomImg";
import { licenseScope } from 'commons/json/licenseScope';

	 export default {
	 	components: { UploadImg,zoomImg , bussinessScope},
	 	props: {
	 		settleForm: {  
			    type: Object
			},
			isShow: {
				type: Boolean,
				default: false
			},
			imgList: {
				type: Array
			},
			OldLicenseNo: {
				type: String
			}
	 	},
	 	data() {
	 		const validateLicense = (rule, value, callback) => {
                if(!this.$utils.RegexUtils('ISROADLICENSE',value)) {
                    callback(new Error('请输入有效12位数字的道路运输经营许可证号'));
                }else{
                     if(this.OldLicenseNo && this.OldLicenseNo == value){  //获取的值与当前的值相等则无需再次验证是否存在操作
                         callback(); 
                         return;
                    }
                	this.$ajax(this.$api.common.userCheck, {licenseNo: value}, (data)=> {
                        console.log(data.code);
                        if(data.code == 200){
                            callback(new Error('该道路运输经营许可证号已存在，请重新输入'));
                        }else{
                            callback();
                        }
                    }, (error)=> {
                        console.log(error);
                    })
                }
            };
            const validateCategory = (rule, value, callback) => {
            	if(this.settleForm.category == '' || ((this.settleForm.category == '1' || this.settleForm.category == '2' || this.settleForm.category == '3') && this.settleForm.businessDetailType == '') ){
                    callback(new Error('请选择业务类别'));
            	}else{
            		callback();
            	}
            }
	 		return {
                i: 0,
	 			selectStatusP: false,
	 			provinceJson: provinceJson,
	 			cityJson: cityJson,
	 			countyJson: countyJson,
	 			businessType: businessTypeJson,
	 			otherBussinessType: '',  //其他机动维修类型
	 			roadLincenseValidate: {
	 				licenseNo: [
	 					{ required: true, message: '请输入12位数字的道路运输经营许可证号',max: 12, trigger: 'blur' },
	 					{ validator: validateLicense, trigger: 'blur'}
	 				],
                    provinceCode: [{ required: true, message: '请选择管辖省份', trigger: 'change' }],
                    cityCode: [{ required: true, message: '请选择管辖城市', trigger: 'change' }],
                    countyCode: [{ required: true, message: '请选择管辖区域', trigger: 'change' }],
                    roadPhoto: [{required: true, message: '请上传道路运输经营许可证照片', trigger: 'change'}],
                    licenseScope: [{ validator: validateCategory, trigger: 'change'}]
	 			}
	 		}
	 	},
	 	mounted() {
 			this.licenseScopeB = JSON.parse(JSON.stringify(licenseScope));  //深复制之后操作
	 	},
	 	methods: {
	 		getLicensePublic(val) {
	 			this.settleForm.licensePublish = val;
	 		},
	 		getLicenseBegin(val) {
	 			this.settleForm.licenseBegin = val;
	 		},
	 		getLicenseEnd(val) {
	 			this.settleForm.licenseEnd = val;
			},
			validateFun(which) {  //验证表单
	 			let hasError = 0;
	 			//获取输入框输入的其他类型
	 			this.$refs.bussinessScope.otherScopeFun();
	 			
	 			for(let k in this.roadLincenseValidate){
					this.$refs.settleForm.validateField(k, (tips) => {
	                    if(tips){
	                    	console.log(tips);
	                    	hasError++;
	                    }
                	})
	 			}

	 			console.log(hasError)
	 			if(hasError == 0){
	 				if(which){  //审核失败的情况下存在which
                        this.$emit('ItemProgress', 'ok')
                    }else{
 						this.$emit('lintTo', 3,'road')
 					}
				}
	 		},
	 		getRoadPhoto(id) {
	 			console.log(id);
	 			this.settleForm.roadPhoto = id;
	 		},
	 		provinceCodeChange(val) {
	 			this.i++;
                if(this.i != 1) {
                  this.selectStatusP = true;
                }
                this.settleForm.provinceCode = val;
	 		},
	 		cityCodeChange(val) {
	 			this.i++;
                if(this.i != 2) {
                  this.selectStatusP = true;
                }
                this.settleForm.cityCode = val;
	 		}
	 	},
	 	computed: {
            getCity() {
                if (this.settleForm.provinceCode) {
                    let str = (this.settleForm.provinceCode + '').substr(0, 2);
                    let arr = [];
                    cityJson.forEach((value) => {
                        if (value.c.substr(0, 2) == str) {
                            arr.push(value);
                        }
                    });
                    if (this.selectStatusP) {
                        this.settleForm.cityCode = arr[0].c;
                    }
                    return arr;
                }
            },
            getCounty() {
            	if (this.settleForm.cityCode) {
			        let str = (this.settleForm.cityCode+'').substr(0,4);
			        let arr = [];
			        countyJson.forEach(function(value) {
			          if(value.c.substr(0,4) == str){
			            arr.push(value);
			          }
			        });
			        if(this.selectStatusP){
			          this.settleForm.countyCode = arr[0].c;
			        }
			        return arr;
			    }
		    }
        }
	 }
</script>
<style lang="less" rel="stylesheet/less">
.roadLicenseBox {
	.lincenseScopeBox {
		width: 100% !important;
	}
	.ivu-form {
		text-align: left;
	}
	.ivu-input-icon {
		height: 40px;
		line-height: 40px;
	}
	.ivu-date-picker,
	.ivu-form-item,
	.ivu-input[type="text"] {
		width: 500px;
	}
	.InputMarginR {
		margin-right: 136px;
		.ivu-form-item-content {
			width: 100%;
		}
	}
	.cityInput,
	.desctrictInput {
		display: inline-block;
		.ivu-form-item-content {
			margin-right: 0 !important;
			width: 164px;
		}
	}
	.desctrictInput {
		width: 384px;
	}
	.cityInput {
		width: 164px;
		.ivu-form-item-content {
			margin-left: 0 !important;
		}
	}
}
</style>